<template>
	<view>
		<view class="header-comp">
			<view class="header">
				<view class="header-bar">
					<view class="fill-height el-flex">
						<view class="header-btn2" @click="Back()">
							<image src="../../static/images/left_b.png" mode=""></image>
						</view>
						<view class="placeholder text-ellipsis">
							选择收货城市
						</view>
						<view class="app-header-right"></view>
					</view>
				</view>
			</view>
		</view>
		<view class='address-citys'>
			<view class="hot-city">
				<view class="dt">
					热门城市
				</view>
				<view class="dd">
					<block v-for="(hot,index) in hots" :key="index">
						<text @click="getCity(hot)">{{hot}}</text>
					</block>
				</view>
			</view>
			<view class="city-list" v-for="(item,index) in cityList" :key="index">
				<view class="dt">
					{{item.first_letter}}
				</view>
				<view class="dd" v-for="(child,childIndex) in item.city_list" @click="getCity(child)">
					{{child}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cityList: [],
				product_id: '',
				hots: ["北京", "上海", "广州", "深圳", "天津", "武汉", "重庆", "南京"]
			};
		},
		methods: {
			Back() {
				uni.navigateBack(-1)
			},
			getCity(name) {
				let self = this
				uni.navigateBack({
					delta: 1,
					success() {
						uni.$emit('getCity', {
							city: name,
							product_id: self.product_id
						})
					}
				})
			},
			fetchCityData() {
				this.$request.get('/getAddress')
					.then((res) => {
						this.cityList = res.data.data
					}).catch(e => {
						console.log('错误了:', e)
					})
			},
		},
		onLoad(e) {
			this.product_id = e.product_id
			this.fetchCityData()
		},
	}
</script>

<style lang="scss" scoped>
	.header {
		height: .96rem;
		background-color: rgb(242, 242, 242);


		.header-bar {
			height: 100%;
		}

		.fill-height {
			height: 100%;

			.header-btn2 {
				display: block;
				width: 0.6rem;
				margin: 0 0.2rem;

				image {
					width: 0.5rem;
					height: 0.5rem;
				}
			}

			.app-header-right {
				min-width: 1rem;
			}

			.placeholder {
				flex: 1;
				text-align: center;
				font-size: .3rem;
				min-width: 0;
				width: 100%;
				color: rgb(102, 102, 102);
			}
		}
	}

	.address-citys {
		padding-top: .96rem;
		background: #f5f5f5;
		font-size: .24rem;
		text-align: left;

		view {
			line-height: 1.15;
		}

		.hot-city {
			.dt {
				font-size: .24rem;
				background: #f5f5f5;
				color: #a6a6a6;
				padding: 0.15rem 0.2rem;
			}

			.dd {
				padding: 0.2rem;
				display: block;
				background: #fff;

				text {
					display: inline-block;
					padding: 0.1rem 0;
					width: 25%;
					text-align: center;
					font-size: .24rem;
					color: #3c3c3c;
				}
			}
		}

		.city-list {
			.dt {
				font-size: .24rem;
				background: #f5f5f5;
				color: #a6a6a6;
				padding: 0.15rem 0.2rem;
			}

			.dd {
				font-size: .24rem;
				border-bottom: 1px solid #f6f6f6;
				display: block;
				background: #fff;
				padding: 0.2rem;
			}
		}
	}
</style>